import React, { useState, useCallback, useEffect } from "react";
import { Form, Row, Col, Button, Input } from "antd";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
import { cloneDeep } from "lodash";
import Iconfont from "@/components/IconFont";

function getSortColumns(columns) {
	const filterColumns = columns.filter(e => e.search);
	const sortColumns = filterColumns
		.map((e, index) => {
			const order = e.search.order ?? index + 2;
			const search = {
				...e.search,
				order
			};
			return {
				...e,
				search
			};
		})
		.sort((a, b) => a.search.order - b.search.order);
	return sortColumns;
}
/**
 *
 * @param {*} tableKey
 * @param {*} columns
 * @param {*} onSearchReset
 * @param {*} onSearchFinish
 * @param {*} searchSpan
 * @param {*} quickSearch
 * @returns
 */
export default React.memo(
	({ form, tableKey, columns, onSearchReset, onSearchFinish, searchSpan = 3, quickSearch: QuickSearch }) => {
		const ComponentName = "SearchForm";
		useEffect(() => {
			console.warn(`${ComponentName},初始化`);
		}, []);
		// //////////////////////////
		const gutter = 16;
		///////////////////////////
		const sortColumns = getSortColumns(columns);
		const onReset = useCallback(() => {
			form.resetFields();
			onSearchReset && onSearchReset(form.getFieldsValue());
		}, []);

		const onFinish = useCallback(
			val => {
				onSearchFinish && onSearchFinish(cloneDeep(val));
			},
			[sortColumns, onSearchFinish]
		);

		//
		const ColEls = React.memo(({ cols, span, form }) => {
			return cols.map((col, index) => {
				const SEARCH_ITEM = col.search || {};
				// search.code优先,以便与列表区分
				const CODE = SEARCH_ITEM.code || col.code;
				const SPAN = SEARCH_ITEM.span || span || 3;
				const { group, render, content, formItemProps } = SEARCH_ITEM;
				// key
				const KEY = (CODE || "key") + "-" + index + "-";

				const colProps = {
					key: KEY,
					xs: 24,
					sm: 24,
					md: SPAN * 2,
					xl: SPAN
				};

				if (content) {
					// 通用 col.searchContent : ()=> <Input />
					return (
						<Col {...colProps}>
							<Form.Item name={CODE} {...(formItemProps || {})}>
								{content(form)}
							</Form.Item>
						</Col>
					);
				}
				// 只包一层 col 需要在render中写 Form.Item
				if (render) {
					return <Col {...colProps}>{render(form, col)}</Col>;
				}

				// 如果 group 是数组
				if (group && Array.isArray(group)) {
					// searchGroup
					const GROUP_ELEMENTS = group.map((__SEARCH_ITEM, childIndex) => {
						// searchCode优先,以便与列表区分
						const __CODE = __SEARCH_ITEM.code;
						const __SPAN = __SEARCH_ITEM.span;
						const { group: __group, render: __render, content: __content, formItemProps: __formItemProps } = __SEARCH_ITEM;
						const __KEY = KEY + "-" + __CODE + "-" + childIndex;
						if (__render) {
							return (
								<Col span={__SPAN} key={__KEY}>
									{__render(form, __SEARCH_ITEM)}
								</Col>
							);
						}
						// searchGroup=>searchContent
						return (
							<Col span={__SPAN} key={__KEY}>
								<Form.Item {...(__formItemProps || {})} name={__CODE}>
									{__content && __content(form)}
								</Form.Item>
							</Col>
						);
					});
					// col + searchGroup
					return (
						<Col {...colProps}>
							<Input.Group>
								<Row>{GROUP_ELEMENTS}</Row>
							</Input.Group>
						</Col>
					);
				}
				return <Col {...colProps}>配置错误</Col>;
			});
		});

		return (
			<Form className="views-search-form" key={tableKey + "SearchForm"} form={form} layout="horizontal" onFinish={onFinish}>
				<Row gutter={gutter} style={{ minWidth: "100%" }}>
					<ColEls cols={sortColumns} span={searchSpan} form={form} />
					<Col className="mb16">
						{QuickSearch && <QuickSearch tableKey={tableKey} searchFormInstance={form} onQuickSearch={onFinish} />}
						<Button
							type="primary"
							icon={<Iconfont type="iconsousuo" style={{ fontSize: 14 }} />}
							htmlType="submit"
							style={{ marginRight: 8 }}
						>
							搜索
						</Button>
						<Button onClick={onReset}>
							<ReloadOutlined /> 重置
						</Button>
					</Col>
				</Row>
			</Form>
		);
	}
);
